<template>
  <div class="wh-100" style="background-color: #fff">
    <div style="height: 50px; border-bottom: 1px solid #e8edf4" class="px-20 d-flex-between-center">
      <div class="fs-16 fw-7">添加场地</div>
      <Button class="fs-12" style="width: 70px; height: 25px; background-color: #fff" @click="$router.back()">返回
      </Button>
    </div>
    <!--表单-->
    <div class="ml-68 mt-16">
      <Form ref="siteFormRef" :model="siteForm" :rules="siteFormRules" :label-width="110" style="width: 500px">
        <FormItem label="所属校区" prop="campus">
          <Select v-model="siteForm.campusId" placeholder="请选择校区">
            <Option v-for="item in campusList" :value="item.id" :key="item.id">{{ item.campusName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="场地名称" prop="venueName">
          <Input v-model="siteForm.venueName" placeholder="输入场地名称"></Input>
        </FormItem>
        <FormItem label="场地用途" prop="venueUse">
          <RadioGroup v-model="siteForm.venueUse">
            <Radio label="双选会"></Radio>
            <Radio label="宣讲会"></Radio>
            <Radio label="咨询室"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否启用" prop="isUse">
          <i-switch v-model="siteForm.isUse"/>
        </FormItem>
        <FormItem label="场地位置" prop="venueAddress">
          <Input v-model="siteForm.venueAddress" placeholder="请填写场地详细位置"></Input>
        </FormItem>
        <FormItem label="坐席数量" prop="venueCapacity">
          <Input v-model="siteForm.venueCapacity" type="number" placeholder="填写场地用人单位坐席数量"></Input>
        </FormItem>
        <FormItem label="学生容量" prop="studentNumber">
          <Input v-model="siteForm.studentNumber" type="number" placeholder="填写可容纳的学生数量"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" style="width: 100px" @click="submitForm">保存</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import {addCampusAPI, addSiteAPI, getCampusList} from '../../../api/bys/siteAdministration/index';
// region TODO 表单
const siteForm = {
  campusId: '', // 校区
  isUse: false, //是否启用
  studentNumber: '', //学生容量
  venueAddress: '', //场地位置
  venueCapacity: '', //坐席数量
  venueName: '', //场地名称
  venueUse: '' //场地用途
};
const campusList = [];
const siteFormRules = {
  venueUse: [{required: true, message: '必填项', trigger: 'blur'}],
  venueName: [{required: true, message: '必填项', trigger: 'blur'}],
  venueCapacity: [{required: true, message: '必填项', trigger: 'blur'}],
  venueAddress: [{required: true, message: '必填项', trigger: 'blur'}],
  enableOrNot: [{required: true, message: '必填项', trigger: 'change'}]
};
// endregion
export default {
  data() {
    return {
      siteForm,
      siteFormRules,
    campusList
    };
  },
  methods: {
    getCampusList() {
      getCampusList().then(res => {
        this.campusList = res.result
      })
    },
    submitForm() {
      this.$refs.siteFormRef.validate(valid => {
        if (valid) {
          this.$confirm('你确定添加该场地吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                addSiteAPI(this.siteForm).then(res => {
                  if (res.success) {
                    this.$message({
                      type: 'success',
                      message: '添加场地成功!'
                    });
                    this.siteForm.isUse = false
                    this.siteForm.studentNumber = ''
                    this.siteForm.venueAddress = ''
                    this.siteForm.venueCapacity = ''
                    this.siteForm.venueName = ''
                    this.siteForm.venueUse = ''
                    this.$router.back();
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消添加'
                });
              });
        } else {
          this.$message.error('请完善相关信息！');
          return false;
        }
      });
    }
  },
  async mounted() {
    this.getCampusList()
  }
};
</script>
